<template>
  <div class="lg-node-card" :style="{width:width,background:cardColor[card.color]}">
    <div class="top">
        <p class="time">{{dateOne(card.moment)}}</p>
        <p class='lable'>{{label[card.type][card.label]}}</p>
    </div>
    <p class="message" @click="toDetail">{{card.message}}</p>
    <div class="foot">
        <div class="foot-left">
          <div class="icon" @click="clickLike">
            <img src="@/assets/images/爱心.png" alt="" class="aixin" :calss="{ islike:card.like[0].count>0 }">
            <span class="value">{{ card.like[0].count }}</span>
          </div>
          <div class="icon" v-show="card.comcount[0].count>0">
            <img src="@/assets/images/留言.png" alt="" class="liuyan">
            <span class="value">{{ card.comcount[0].count }}</span>
          </div>

        </div>
        <div class="name">{{card.name}}</div>
    </div>
  </div>
</template>

<script>
import { label,cardColor } from '@/utils/data';
import {dateOne} from '@/utils/lgmethod';
import { insertfeedbackApi } from '@/api/index';

export default {
  data(){
    return{
      label,
      dateOne,
      cardColor,
      user:this.$store.state.user
    }
  },
  props:{
    width:{
      default:'288px'
    },
    note:{
      default:{}
    }
  },
  computed:{
    card(){
      return this.note
    }
  },
  methods:{
    //显示详情
    toDetail(){
      this.$emit('toDetail')
    },
    //点击喜欢
    clickLike(){
      if(this.card.islike[0].count==0){
        let data={
          wallId:this.card.id,
          userId:this.user.id,
          type:0,
          moment:new Date(),
        }
        insertfeedbackApi(data).then(()=>{
          //反馈完成
          this.card.like[0].count++;
          this.card.islike[0].count++
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.lg-node-card{
  height: 240px;
  padding: 10px 20px;
  box-sizing: border-box;
  position: relative;
  
  
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    p{
      font-size: 12px;
      color: @gray-3;
    }
  }
  .message{
    height: 140px;
    font-size: 15px;
    color: @gray-1;
    font-family:'Franklin Gothic Medium';
    cursor: pointer;
  }
  .foot{
    display: flex;
    justify-content: space-between;
    bottom: 16px;
    left: 0;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    .foot-left{
      display: flex;
      .value{
        font-size:@size-12;
        color:@gray-2;
        line-height: 16px;
        padding-left: @padding-4;
      }
      .icon{
        padding-right:@padding-8 ;
        display: flex;
        align-items: center;
      }
      img{
          width: 13px;
      }
      .aixin{
        cursor: pointer;
        transition:@tr;
        &:hover{
          color:red
        }
      }
      .islike{
        color:red
      }
    }
  }
  .name{
    font-size: 17px;
    color:@gray-1;
  }
}
</style>